<template>
  <div class="w-full fixed h-16 bottom-0 z-50 bg-[#f0f8ff] flex items-center rounded-tl-4 rounded-tr-4">
    <n-grid x-gap="12"
            class="w-full h-10 leading-10"
            :cols="3"
            responsive="screen">
      <n-grid-item class="hidden md:flex justify-left pl-5">
        <span class="font-600">Journee Isip</span>
      </n-grid-item>
      <n-grid-item class="flex justify-end items-center md:hidden">
        <n-icon :size="20">
          <ArrowUndoOutline /> <!-- 左侧图标 -->
        </n-icon>
      </n-grid-item>
      <n-grid-item :md-span="1"
                   class="flex justify-center items-center gap-2">
        <NButton color="#1494ce"
                 class="hover:opacity(0.5) h-10">Question 1 of 2</NButton>
      </n-grid-item>
      <n-grid-item class="flex items-center md:hidden">
        <n-icon :size="20">
          <ArrowRedoOutline /> <!-- 右侧图标 -->
        </n-icon>
      </n-grid-item>
      <n-grid-item class="hidden md:flex justify-end pr-5">
        <n-space justify="end">
          <NButton class="hover:opacity(0.5)"
                   @click="goHome">
            Home</NButton>
          <NButton class="hover:opacity(0.5)"
                   :disabled="current == 1"
                   @click="exBack">
            Back</NButton>
          <NButton class="hover:opacity(0.5)"
                   :disabled="current == 3"
                   @click="exNext">
            Next</NButton>
        </n-space>
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";

import { NGrid, NGridItem, NButton, NIcon, NSpace, useDialog } from "naive-ui";
import { ArrowUndoOutline, ArrowRedoOutline } from "@vicons/ionicons5"; // 使用图标库

import { useUserStore } from "@/store";

const userStore = useUserStore();
const dialog = useDialog();
const router = useRouter();
const current = computed(() => {
  return userStore.testCurEx;
});

function goHome() {
  router.push("/");
}
function exBack() {
  userStore.setTestCurEx(current.value - 1);
}
function exNext() {
  if (current.value == 2) {
    showConfirm();
  } else {
    userStore.setTestCurEx(current.value + 1);
  }
}
const showConfirm = () => {
  dialog.warning({
    title: "Submit",
    content: "Are you certain you wanna submit?",
    positiveText: "Submit",
    negativeText: "Cancel",
    onPositiveClick: () => {
      // 确认后进行页面跳转，这里以跳转到百度为例
      userStore.setTestCurEx(current.value + 1);
    },
    onNegativeClick: () => {
      // message.info('你已取消操作')
    },
  });
};
</script>

<style lang="less" scoped>
</style>
